<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="教具名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" :maxLength="20" placeholder="请输入名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="教具类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <sk-tree-dict v-model="model.type" placeholder="请选择教具类型" parentCode="A05"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="总数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="number">
              <a-input-number v-model="model.number" :min="0"   placeholder="请输入数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="可借数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="canLentNum">
              <a-input-number v-model="model.canLentNum" :min="0" placeholder="请输入可借数量" style="width: 100%" @change="inputCanLentNum"/>
              <div style="color:#f00;" v-if="canLentNumShow">可借数量不能超过总数量！</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit">
              <sk-tree-dict v-model="model.unit" placeholder="请选择单位" parentCode="A06"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="所属活动室" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="source">
              <sk-tree-dict v-model="model.source" placeholder="请选择所属活动室" parentCode="A04"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag v-model="model.status"  title="性别2" dictCode="tool_status" placeholder="请选择状态"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="image">
              <j-image-upload  v-model="model.image"  ></j-image-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { duplicateCheck } from '@/api/api'
  import SkTreeDict from "@/components/skComponent/skTreeDict.vue";
  export default {
    name: 'SkToolManagerForm',
    components: {
      SkTreeDict
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          name: [
            { required: true, message: '请输入名称!'},
            { validator: this.validateDictCode }
          ],
          type: [
            { required: true, message: '请输入类型!'},
          ],
          unit: [
            { required: true, message: '请输入单位!'},
          ],
          number: [
            { required: true, message: '请输入数量!'},
          ],
          status: [
            { required: true, message: '请输入状态!'},
          ],
        },
        url: {
          add: "/management/skToolManager/add",
          edit: "/management/skToolManager/edit",
          queryById: "/management/skToolManager/queryById"
        },
        canLentNumShow:false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      // await this.getDictList(true,"A06")
    },
    methods: {
      // 重复校验
      validateDictCode(rule, value, callback) {
        var params = {
          tableName: 'sk_tool_manager',
          fieldName: 'name',
          fieldVal: value,
          dataId: this.model.id
        }
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(res.message)
          }
        })
      },
      // 可借数量不能大于总数量
      inputCanLentNum(){
        if (this.model.canLentNum > this.model.number || !this.model.number && this.model.canLentNum) {
          this.canLentNumShow = true;
          return 
        }
        this.canLentNumShow = false;
      },
      // 获取所有维度
      getDictList(async,pcode) {
        return new Promise((resolve, reject) => {
          const url = '/table/skCategory/loadTreeRoot'
          // async=true时只返回一级数据，false返回所有子节点数据
          const params = {
            async: async,
            pcode: pcode
          }
          getAction(url, params)
            .then(res => {
              if (res.success) {
                resolve(res.result)
              } else {
                this.$message.warning(res.message)
              }
            })
            .catch(error => {
              console.error(error)
            })
        })
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        if (this.canLentNumShow) {
          return
        }
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            this.model.status = Number(this.model.status)
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>